<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        /*遮罩层*/

        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }

        .z_alert {
            width:75%;
            height: 150px;
            border-radius: .2rem;
            background: rgba(249, 249, 249, 0.98);
            font-size:15px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        input{
            border-bottom:1px solid #ddd;
            color: #484848;
            width:40%;
            background: transparent;
        }
        .btn-r{
            background-color: #26a79b;
            height: 53px;
            width: 53px;
            border-radius: 100%;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
        }
        .btn-i{
            background-color: #26a79b;
            height: 53px;
            width: 68px;
            border-radius: 100%;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
        }
        .btn-c{
            background-color: #96add0;
            height: 33px;
            width: 50px;
            border-radius: 30px;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
            font-size: 12px;
        }
        .btn-f{
            background-color: #9d9d9d;
            height: 33px;
            width: 50px;
            border-radius: 30px;
            display:flex;
            box-sizing: border-box;
            color: #fff;
            padding-right: 2px;
            font-size: 12px;
        }
        #address{
            position: absolute;
            z-index: 100;
            width: 94%;
            top:42px;
            margin:0 10px  0 11px;
            background: #fff;
            border: 1px solid #ccc;
            border-top: 0;
        }
        #myPageTop{
            position: absolute;
            z-index: 100;
            width: 94%;
            height: 32px;
            right: 0px;
            line-height: 32px;
            top:10px;
            margin:0 10px ;
            background: #fff;
            border-bottom: 0;
            padding: 0;
        }

        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        .price{
            font-size: 12px;
            color: #fb5212;
            display:none;
            position: absolute;
        }
        .amap_lib_placeSearch_poi{
            display: none;
        }
         .amap-icon img{
            width: 30px;
        }
    </style>
</head>
<body style="font-family: 微软雅黑">
<!--<div class="z_mask">
    &lt;!&ndash;弹出框&ndash;&gt;
    <div class="z_alert">
        <div style="height: 30px;line-height: 30px;padding-left: 31px;text-align: center">备注<small style="font-size: 11px">(选填)</small><span class="fa fa-times" style="float: right;margin: 5px 10px 0 0"></span></div>
        <textarea style="border: 1px solid #ccc;padding: 3px 5px;font-size: 13px;height: 60px;"></textarea>
        <button class="sure aui-btn aui-btn-outlined aui-btn-block">确认召唤</button>
    </div>
</div>-->

<div class="z_mask" id="send"><div class="z_alert">
    <div style="height: 80px;line-height: 25px;padding:14px 0 0 0;text-align: center">快递费
        <span id="exPrice"></span>
        <span class="price">(请输入费用)</span><br/>
        备注<small>（选填）</small>
    <textarea placeholder="在此可输入点什么..." style="border: 1px solid #ccc;padding: 3px 5px;font-size: 13px;height: 46px;" id="note"></textarea></div>
    <div style="text-align: center;height: 39px;margin-top: 31px;width: 100%">
        <div id="sureSd" onclick="sureSd()" style="width: 49%;display: inline-block;line-height: 39px;background: #25a195;color: #fff">确认</div>
        <div id="canSd" onclick="canSd()"style="width: 49%;display: inline-block;line-height: 39px;">取消</div></div></div></div>

<div  id="map" style="overflow:hidden">
  <!--  <header class="aui-bar aui-bar-nav" style="background: #fff">
        <a class="aui-btn aui-pull-right" tapmode onclick="backMap()">
            <span class="aui-iconfont aui-icon-down" style="color: #515151"></span>
        </a>

    </header>-->
    <div id="myPageTop">
        <label style="margin: 0"><span class="fa fa-map-marker" style="margin: 0 10px;color: #2f44f9"></span>起：</label>
        <input id="tipinput" style="height: 30px;width: 70%"/>
    </div>
    <div id="address" >
        <label style="color: #666666;font-size: 14px"><span class="fa fa-map-marker" style="margin: 0 10px;color: #ff5a19"></span>终：</label>
        <input id="tipinput1" style="height: 30px;width: 70%;font-size: 14px;border: 0;" readonly />
    </div>
    <div id="container" style=""></div>
    <div id="tip"></div>
    <div id="panel" style="display: none"></div>
      <div class="button-group" style="display:none;">
        <input id="setFitView" class="button" type="button" value="地图自适应显示"/>
    </div>
    <div class="info-tip">
        <div id="centerCoord"></div>
        <div id="tips"></div>
    </div>
    <div style="position:fixed;bottom: 10px;left: 45%;" id="confirm"><button class="btn-r" >召唤</button></div>
    <div style="position:fixed;bottom: 20px;left:20px;" id="back"><button class="btn-f"  onclick="history.back();">返回</button></div>

    <!--<div style="position:fixed;bottom: 10px;left: 45%;display: none" id="confirming"><button class="btn-i" >召唤中</button></div>
    <div style="position:fixed;bottom: 20px;left:80px;display: none" id="canCf"><button class="btn-c"  >取消</button></div>
    <div style="position:fixed;bottom: 20px;left:20px;display: none" id="canb"><button class="btn-f"  >返回</button></div>-->
</div>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script type="text/javascript" src="../../myJs/jquery-1.12.1.min.js" ></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a37424dd342449fb8ab5f809081e01ce&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Riding"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    var addressLongitude,addressLatitude,addr,purchaseLatitude,purchaseLongitude;
   /*  var data = {
        "code":200,
        "msg":{
            "addressLongitude":120.391628,
            "addressLatitude":30.312482,
            "address": "钱江湾生活区",
            "address_details": "34幢111",
        }
    } */
    $(function(){
    	var courierFees =sessionStorage.getItem("courierFees");
    	$("#exPrice").html(courierFees);
        addressLongitude = sessionStorage.getItem("addressLongitude");
        addressLatitude = sessionStorage.getItem("addressLatitude");
        addr = sessionStorage.getItem("addr");
        $("#tipinput1").val(addr);

    })
    var map, geolocation,map1;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:14,
        center:[120.373354,30.314091]
    });
    map.clearMap();  // 清除地图覆盖物
    var markers = [{
        icon: '../../myImage/l6.png',
        position: [120.343399,30.32076]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.34666,30.313498]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.342111,30.306163]
    },{
        icon: '../../myImage/l6.png',
        position: [120.325718,30.298752]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.316105,30.301865]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.373354,30.314091]
    },{
        icon: '../../myImage/l6.png',
        position: [120.363912,30.313869]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.381508,30.303347]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.390091,30.300644]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.386271,30.313647]
    }, {
        icon: '../../myImage/l6.png',
        position: [120.383052,30.308497]
    }];
    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
        new AMap.Marker({
            map: map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-12, -36),
        });
    });
    var center = map.getCenter();
    var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
    document.getElementById('centerCoord').innerHTML = centerText;
    document.getElementById('tips').innerHTML = '成功添加三个点标记，其中有两个在当前地图视野外！';

    // 添加事件监听, 使地图自适应显示到合适的范围
    AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
        var newCenter = map.setFitView();
        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
    });
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        var s = JSON.stringify(e);
       // alert(s);
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
        console.log("lng"+ e.poi.location.lng);
        console.log("lat"+ e.poi.location.lat);
        console.log("name"+ e.poi.name);
        console.log("district"+ e.poi.district);
        $("#purchasePlace").val(e.poi.name);
        sessionStorage.setItem("purchaseLongitude", e.poi.location.lng);
        sessionStorage.setItem("purchaseLatitude", e.poi.location.lat);
        sessionStorage.setItem("name", e.poi.name);

        //根据起终点坐标规划骑行路线
        var riding = new AMap.Riding({
            map: map,
            panel: "panel"
        });
       /* addressLongitude = sessionStorage.getItem("addressLongitude");
        addressLatitude = sessionStorage.getItem("addressLatitude");*/
        purchaseLongitude = e.poi.location.lng;
        purchaseLatitude =  e.poi.location.lat;
        riding.search([purchaseLongitude,purchaseLatitude],[addressLongitude,addressLatitude]);

    }

    $("#confirm").on("click",function(){
        var purchaseP = $("#tipinput").val();
        if(purchaseP==""){
            alertmd("请输入起点");
            return false;
        }else {
            $(".z_mask").show();
        }
    })
    $(".fa-times").on("click",function(){
        $(".z_mask").hide();
    })

    function sureSd(){
       var purchaseLongitude = sessionStorage.getItem("purchaseLongitude");
       var purchaseLatitude = sessionStorage.getItem("purchaseLatitude");
       var name = sessionStorage.getItem("name");
       var orderId=sessionStorage.getItem("orderId");
       var note = $("#note").val();
       alert(orderId);
       alert(note);
       alert(name);
        	  $.ajax({
     	         type: "post",
     	         url: '/randomdelivery/userPurchaseController/findCourier',
     	         data: {
     	        	 orderId:orderId ,
     	        	purchaseLongitude:purchaseLongitude,
     	        	purchaseLatitude:purchaseLatitude,
     	        	purchaseAddress:name,
     	        	purchaseNote:note
     	        	 },
     	         datatype: "json",
     	         success: function (data) {
     	        	 alert(JSON.stringify(data));
     	        	location.href="../helpBuy/pay.html";
     	         }
     	         });
           

    }
    function canSd(){
        $(".z_mask").hide();
    }
    $("#exPrice").on("focus", function () {
        $(".price").hide();
    })
</script>
</body>
</html>